<template>
	<view class="login">
		<view class="topBox">
			<image class="head" mode="widthFix" src="@/static/imgs/login.png"></image>
			<view class="tip">
				<image class="logo" mode="widthFix" src="@/static/imgs/logo.png"></image>
				<view style="color: #336054">您好，</view>
				<view style="color: #336054">欢迎登录</view>
			</view>
		</view>
		<view class="cantainer pw">			
			<view>
				<view class="bold">手机号</view>
				<view>
					<input class="uni-input" v-model="phone" placeholder="请输入您的手机号" />
				</view>
				<view class="bold">密码</view>
				<view>
					<input class="uni-input" v-model='pwd' placeholder="请输入您的密码" type="password"/>
				</view>
			</view>
			<view class="pwd" v-if="false">
				<uni-icons type="locked" color="#11A8A3" size="20"></uni-icons>
				<span class="pwd">忘记密码？</span>
			</view>
			<button class="btn" @click="login">登录</button>
			<view v-if="false">
				<view>
					<uni-icons @click="flag=true" v-if="!flag" type="circle" color="#999" size="22"></uni-icons>
					<uni-icons @click="flag=false" v-else type="circle-filled" color="#11A8A3" size="22"></uni-icons>
					已阅读同意<span class="theme">《用户服务协议》、《隐私申明》、</span></view>
				<view class="theme" style="text-indent: 1rem;">《中国移动认证服务条款》</view>

			</view>
		</view>
		<view></view>
	</view>
</template>

<script>
import { encrypt } from '@/utils/index'

export default {
	data() {
		return {
			flag: false,
			pwd: 'admin123',
			phone: 'admin',
		};
	},
	onLoad() {
	},
	methods: {
		login() {
			// if(this.flag==false) {
			// 	return this.$msg('请先钩选下方协议')
			// }
			if(this.phone=='' || this.pwd=='') {
				return this.$msg('请输入手机号或密码')
			}
			this.$axios({
				method: 'post',
				url: '/login',
				data: {
					// password: encrypt(this.pwd),
					password: this.pwd,
					username: this.phone
				},
			}).then(res=>{
				if(res.code==200) {				
					uni.setStorageSync('token', res.token)
					uni.setStorageSync('userInfo', JSON.stringify({user: '用户'}))
					uni.switchTab({
						url: '/pages/tabBar/tabBar1'
					});
					this.$msg('登录成功')
				} else {
					this.$msg(res.msg)
				}
			})
		}
	}
}
</script>

<style lang="scss">
.btn {
	width: 100%;
	height: 48px;
	margin: 20px auto;
	line-height: 48px;
	border-radius: 24px;
	background: linear-gradient(87.6deg, rgba(17, 168, 163, 1) 2.64%, rgba(132, 219, 187, 1) 96.87%);
	color: rgba(255, 255, 255, 1);
	font-size: 16px;
	text-align: center;
}

.pwd {
	text-align: right;
	color: $theme;
}

.uni-input {
	height: 40px;
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
}

.logo {
	width: 43px;
	height: 44px;
	margin: 40px 0 10px;
}

.login {
	width: 100%;
	height: 100%;
	// background: url('@/static/imgs/loginbg.png') no-repeat center/100% 100%;
}
.topBox, .head {
	position: relative;
	width: 100%;
}
.tip {
	position: absolute;
	top: 10%;
	left: 20px;
}
.pw {
	margin-top: 10px;
}

.bg {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}
</style>
